<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<view class="" style="display: flex;justify-content: center;align-items: center; flex-direction: column;">
				<view class="title">{{ currentTitle }}</view>
				<view class="subtitle">{{ currentSubtitle }}</view>
			</view>

			<view class="close-btn" @click="hideComponent" v-if="currentComponent">
				<!-- <image src="/static/aver.jpg" mode="aspectFit"></image> -->
				<uni-icons type="close" style="font-size: 25px; color: red;"></uni-icons>
				<!-- <text>关闭</text> -->
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 游戏卡片网格 (默认显示) -->
			<scroll-view class="game-grid" v-show="!currentComponent">
				<view class="grid-row">
					<!-- 倒计时卡片 -->
					<view class="game-card countdown" @click="showComponent('countdown')" :animation="animationData[0]"
						@touchstart="startAnimation(0)" @touchend="resetAnimation(0)" style="background-color: aqua;">
						<view class="card-icon">
							  <text style="font-size: 50rpx;">⏱️</text>
						</view>
						<view class="card-title">课堂倒计时</view>
						<view class="card-desc">掌控课堂时间</view>
					</view>

					<!-- 随机点名卡片 -->
					<view class="game-card rollcall" @click="showComponent('rollcall')" :animation="animationData[1]"
						@touchstart="startAnimation(1)" @touchend="resetAnimation(1)" style="background-color: #003fff;">
						<view class="card-icon">
							 <text style="font-size: 50rpx;">👨‍🎓</text>
						</view>
						<view class="card-title">随机点名</view>
						<view class="card-desc">公平选择学生</view>
					</view>
				</view>

				<view class="grid-row">
					<!-- 成语接龙卡片 -->
					<view class="game-card idiom" @click="showComponent('idiom')" :animation="animationData[2]"
						@touchstart="startAnimation(2)" @touchend="resetAnimation(2)" style="background-color:  #b400ff;;">
						<view class="card-icon">
							<image src="/static/images/idiom.png" mode="aspectFit"></image>
						</view>
						<view class="card-title">成语接龙</view>
						<view class="card-desc">挑战语言能力</view>
					</view>

					<!-- 单词拼写卡片 -->
					<view class="game-card spelling" @click="showComponent('spelling')" :animation="animationData[3]"
						@touchstart="startAnimation(3)" @touchend="resetAnimation(3)" style="background-color: #00ff47;">
						<view class="card-icon">
							<image src="/static/images/spelling.png" mode="aspectFit"></image>
						</view>
						<view class="card-title">单词拼写</view>
						<view class="card-desc">提升词汇记忆</view>
					</view>
				</view>

				<view class="grid-row">
					<!-- 数学速算卡片 -->
					<view class="game-card math" @click="showComponent('math')" :animation="animationData[4]"
						@touchstart="startAnimation(4)" @touchend="resetAnimation(4)" style="background-color: #ff0000;">
						<view class="card-icon">
							<text style="font-size: 50rpx;">🧮</text>
						</view>
						<view class="card-title">数学速算</view>
						<view class="card-desc">锻炼计算能力</view>
					</view>

					<!-- 记忆卡片 -->
					<view class="game-card memory" @click="showComponent('memory')" :animation="animationData[5]"
						@touchstart="startAnimation(5)" @touchend="resetAnimation(5)" style="background-color: #3c94e7;">
						<view class="card-icon">
							<text style="font-size: 50rpx;">🧠</text>
						</view>
						<view class="card-title">记忆卡片</view>
						<view class="card-desc">训练记忆力</view>
					</view>
				</view>
			</scroll-view>

			<!-- 动态组件容器 -->
			<view class="component-container" v-if="currentComponent">
				<!-- 倒计时组件 -->
				<Countdown v-if="currentComponent === 'countdown'" />

				<!-- 随机点名组件 -->
				<Rollcall v-if="currentComponent === 'rollcall'" />

				<!-- 成语接龙组件 -->
				<Idiom v-if="currentComponent === 'idiom'" />

				<!-- 单词拼写组件 -->
				<Spelling v-if="currentComponent === 'spelling'" />

				<!-- 数学速算组件 -->
				<Math v-if="currentComponent === 'math'" />

				<!-- 记忆卡片组件 -->
				<Memory v-if="currentComponent === 'memory'" />
			</view>
		</view>

		<!-- 背景装饰元素 -->
		<view class="bg-elements">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
			<view class="triangle"></view>
			<view class="square"></view>
		</view>
	</view>
</template>

<script>
	// 导入组件
	import Countdown from '@/components/games/Countdown.vue'
	import Rollcall from '@/components/games/Rollcall.vue'
	import Idiom from '@/components/games/Idiom.vue'
	import Spelling from '@/components/games/Spelling.vue'
	import Math from '@/components/games/Math.vue'
	import Memory from '@/components/games/Memory.vue'

	export default {
		components: {
			Countdown,
			Rollcall,
			Idiom,
			Spelling,
			Math,
			Memory
		},
		data() {
			return {
				currentTitle: '课堂趣味工具',
				currentSubtitle: '让学习更有趣',
				toolTitles: {
					countdown: {
						title: '课堂倒计时',
						subtitle: '掌控课堂时间'
					},
					rollcall: {
						title: '随机点名',
						subtitle: '公平选择学生'
					},
					idiom: {
						title: '成语接龙',
						subtitle: '挑战语言能力'
					},
					spelling: {
						title: '单词拼写',
						subtitle: '提升词汇记忆'
					},
					math: {
						title: '数学速算',
						subtitle: '锻炼计算能力'
					},
					memory: {
						title: '记忆卡片',
						subtitle: '训练记忆力'
					}
				},
				animationData: Array(6).fill(null),
				animations: Array(6).fill(null),
				currentComponent: null
			}
		},
		methods: {
			showComponent(componentName) {
			      this.currentComponent = componentName
			      // 更新标题和副标题
			      const tool = this.toolTitles[componentName]
			      if (tool) {
			        this.currentTitle = tool.title
			        this.currentSubtitle = tool.subtitle
			      }
			    },
			    hideComponent() {
			      this.currentComponent = null
			      // 恢复默认标题
			      this.currentTitle = '课堂趣味工具'
			      this.currentSubtitle = '让学习更有趣'
			    },
			initAnimations() {
				for (let i = 0; i < 6; i++) {
					this.animations[i] = uni.createAnimation({
						duration: 200,
						timingFunction: 'ease'
					})
				}
			},
			startAnimation(index) {
				this.animations[index].scale(0.95).step()
				this.animationData[index] = this.animations[index].export()
			},
			resetAnimation(index) {
				this.animations[index].scale(1).step()
				this.animationData[index] = this.animations[index].export()
			},
			// showComponent(componentName) {
			// 	this.currentComponent = componentName
			// },
			// hideComponent() {
			// 	this.currentComponent = null
			// }
		},
		mounted() {
			this.initAnimations()
		}
	}
</script>

<style lang="scss" scoped>
	/* 主容器 */
	.container {
		position: relative;
		width: 100%;
		// background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		display: flex;
		flex-direction: column;
	}

	/* 头部样式 */
	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		position: relative;
		z-index: 2;
		flex-shrink: 0;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}

		.close-btn {
			position: absolute;
			right: 30rpx;
			width: 50rpx;
			height: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 主内容区域 */
	.main-content {
		flex: 1;
		position: relative;
	}

	/* 游戏网格布局 */
	.game-grid {
		height: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.grid-row {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}
	}

	/* 游戏卡片通用样式 */
	.game-card {
		width: 48%;
		height: 300rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		z-index: 1;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(255, 255, 255, 0.8);
			z-index: -1;
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.card-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.card-desc {
			font-size: 24rpx;
			color: #666;
		}
	}

	/* 组件容器 */
	.component-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: white;
		z-index: 10;
		// padding: 30rpx;
		box-sizing: border-box;
		// overflow: auto;
	}

	/* 背景装饰元素 */
	.bg-elements {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;

		.circle {
			position: absolute;
			border-radius: 50%;
			opacity: 0.1;

			&-1 {
				width: 300rpx;
				height: 300rpx;
				background: #4a90e2;
				top: 10%;
				left: -100rpx;
				animation: float 8s infinite ease-in-out;
			}

			&-2 {
				width: 200rpx;
				height: 200rpx;
				background: #ff7675;
				bottom: 15%;
				right: -50rpx;
				animation: float 10s infinite ease-in-out reverse;
			}

			&-3 {
				width: 150rpx;
				height: 150rpx;
				background: #00b894;
				top: 50%;
				right: 20%;
				animation: float 7s infinite ease-in-out;
			}
		}

		.triangle {
			position: absolute;
			width: 0;
			height: 0;
			border-left: 100rpx solid transparent;
			border-right: 100rpx solid transparent;
			border-bottom: 173.2rpx solid rgba(253, 203, 110, 0.1);
			top: 30%;
			left: 10%;
			transform: rotate(45deg);
			animation: rotate 20s infinite linear;
		}

		.square {
			position: absolute;
			width: 120rpx;
			height: 120rpx;
			background: rgba(129, 236, 236, 0.1);
			bottom: 20%;
			left: 15%;
			transform: rotate(15deg);
			animation: rotateReverse 15s infinite linear;
		}
	}

	/* 动画定义 */
	@keyframes swing {

		0%,
		100% {
			transform: rotate(-5deg);
		}

		50% {
			transform: rotate(5deg);
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-40rpx) translateX(20rpx);
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes rotateReverse {
		from {
			transform: rotate(360deg);
		}

		to {
			transform: rotate(0deg);
		}
	}

	/* 横屏适配 */
	@media (orientation: landscape) {
		.header {
			height: 120rpx !important;

			.title {
				font-size: 40rpx;
			}

			.subtitle {
				font-size: 24rpx;
			}
		}

		.game-card {
			height: 260rpx;

			.card-title {
				font-size: 32rpx;
			}

			.card-desc {
				font-size: 22rpx;
			}
		}
	}
</style>